<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <title>Job Management Page</title>

    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="resources/adminlte/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="resources/adminlte/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="resources/adminlte/dist/css/skins/skin-blue.min.css">
    <link rel="stylesheet" href="resources/adminlte/dist/css/skins/_all-skins.min.css">

    <!-- daterange picker -->
    <link rel="stylesheet" href="resources/adminlte/plugins/daterangepicker/daterangepicker.css">
    <!-- bootstrap datepicker -->
    <link rel="stylesheet" href="resources/adminlte/plugins/datepicker/datepicker3.css">
    <!-- iCheck for checkboxes and radio inputs -->
    <link rel="stylesheet" href="resources/adminlte/plugins/iCheck/all.css">
    <!-- Bootstrap Color Picker -->
    <link rel="stylesheet" href="resources/adminlte/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <!-- Bootstrap time Picker -->
    <link rel="stylesheet" href="resources/adminlte/plugins/timepicker/bootstrap-timepicker.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="resources/adminlte/plugins/select2/select2.min.css">

    <!-- DataTables -->
    <link rel="stylesheet" href="resources/adminlte/plugins/datatables/dataTables.bootstrap.css">
</head>

<body class="skin-blue sidebar-mini layout-top-nav">

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>Job Management</h1>
        <ol class="breadcrumb">
            <li><i class="fa fa-dashboard static"></i>Home</li>
            <li class="static">Job Management</li>
            <li class="static">Job Management</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="box box-primary box-solid">
            <div class="box-header with-border">
                <h3 class="box-title">Quick Search</h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse">
                        <i class="fa fa-minus"></i>
                    </button>
                </div><!-- /.box-tools -->
            </div><!-- /.box-header -->
            <div class="box-body"  id="jobsearchtb" >
                <form class="row">
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Job ID:</label>
                            <input type="text" class="form-control input-sm" placeholder="Job ID" name="jobID">
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Job Name:</label>
                            <input type="text" class="form-control input-sm" placeholder="Job Name" name="jobName">
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Job Describe:</label>
                            <input type="text" class="form-control input-sm" placeholder="Job Describe" name="jobDescribe">
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-md-2">
                        <label>Job Class:</label>
                        <select class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true" name="jobClass">
                            <option selected="selected">SQL Job</option>
                            <option>JS Job</option>
                            <option>KM Job</option>
                            <option>Shell Job</option>
                        </select>
                    </div>
                    <!-- /.col -->
                    <div class="col-md-2">
                        <div class="form-group">
                            <label>Running Status:</label>
                            <select class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true" name="runningStatus">
                                <option selected="selected">UnExcute</option>
                                <option>Stopped</option>
                                <option>Running</option>
                            </select>
                        </div>
                    </div>
                    <!-- /.col -->
                </form>
                <!-- /.row -->
            </div><!-- /.box-body -->
            <div class="box-footer">
                <a href="javascript:void(0)" class="btn btn-default fa fa-search pull-right" plain="true" onclick="searchJob()"> Search</a>
            </div>
            <!-- box-footer -->
        </div>
        <!-- /.box -->

        <div class="box box-primary box-solid">
            <div class="box-header with-border" id="jobtb">
                <a href="javascript:void(0)" class="btn fa fa-plus-square" data-toggle="modal" data-target="#jobInfodlg" data-title="New Job"> New</a>
                <a href="javascript:void(0)" class="btn fa fa-cog" onclick="editConfiguration()"> Config</a>
                <a href="javascript:void(0)" class="btn fa fa-pencil-square-o" data-toggle="modal" data-target="#jobInfodlg" data-title="Alter Job"> Alter  </a>
                <a href="javascript:void(0)" class="btn fa  fa-close" data-toggle="modal" data-target="#noticedlg" data-message="Do you want to delete the chosen job ?" data-title="Delete"> Delete</a>
                <a href="javascript:void(0)" class="btn fa fa-list-alt" onclick="scanLog()"> Log</a>
                <a href="javascript:void(0)" class="btn fa fa-chain" onclick="getJobContent()"> Content</a>
                <a href="javascript:void(0)" class="btn fa fa-play" data-toggle="modal" data-target="#noticedlg"  data-message="Do you want to start the chosen job ?" data-title="Start"> Start</a>
                <a href="javascript:void(0)" class="btn fa fa-square" data-toggle="modal" data-target="#noticedlg" data-message="Do you want to stop the chosen job ?" data-title="Stop"> Stop</a>
            </div>
            <div class="box-body">
                <table id="jobdg" class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Job ID</th>
                            <th>Job Name</th>
                            <th>Job Describe</th>
                            <th>Job Class</th>
                            <th>Running Status</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <th></th>
                            <th>Job ID</th>
                            <th>Job Name</th>
                            <th>Job Describe</th>
                            <th>Job Class</th>
                            <th>Running Status</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <!-- /.box-body -->
            <div class="box-footer"></div>
        </div>       
    </section>
    <!-- /.content -->


    <div id="configdlg" class="modal">
        <div class="modal-dialog">
            <div class="box box-primary box-solid" style="width: 800px">
                <div class="box-header">
                    <button type="button" class="close fa fa-close" data-dismiss="modal" aria-label="Close"></button>
                    <h3 class="box-title"><b>Configuration Setting</b></h4>
                </div>
                <div class="box-body">
                    <form>
                        <table class="table table-condensed">
                            <tbody>
                                <tr>
                                    <th style="width: 10px">#</th>
                                    <th >Job</th>
                                    <th >Config Name</th>
                                    <th >Config Description</th>
                                    <th >Default Value</th>
                                    <th >Variable</th>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>
                                        <input type="text" class="form-control input-sm">
                                    </td>
                                    <td>
                                        <input type="text" class="form-control input-sm">
                                    </td>
                                    <td>
                                        <input type="text" class="form-control input-sm">
                                    </td>
                                    <td>
                                        <select class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true">
                                            <option selected="selected">unify_dict</option>
                                        </select>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control input-sm">
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="box-footer">
                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary pull-right">Save</button>
                </div>
            </div>
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <div id="contentdlg" class="modal">
        <div class="modal-dialog">
            <div class="box box-primary box-solid">
                <div class="box-header">
                    <button type="button" class="close fa fa-close" data-dismiss="modal" aria-label="Close"></button>
                    <h3 class="box-title"><b>Job Content</b></h4>
                </div>
                <div class="box-body">
                    <table>
                        <tr>
                            <td>Job:</td>
                            <td><span id="JobName"></span></td>
                        </tr>
                        <tr>
                            <td>Content:</td>
                            <td><span id="JobContent"></span></td>
                        </tr>
                    </table>
                </div>
                <div class="box-footer" style="text-align: center;">
                    <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <div id="scanlogdlg" class="modal" style="text-align: center;">
        <div class="modal-dialog">
            <div class="box box-primary box-solid" style="width: 800px">
                <div class="box-header">
                    <button type="button" class="close fa fa-close" data-dismiss="modal" aria-label="Close"></button>
                    <h3 class="box-title"><b>Scan Job Log</b></h4>
                </div>
                <div class="box-body">
                    <textarea class="form-control" rows="15" placeholder="Enter ..."></textarea>
                </div>
                <div class="box-footer" style="text-align: center;">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <div id="noticedlg" class="modal">
        <div class="modal-dialog">
            <div class="box box-primary box-solid">
                <div class="box-header">
                    <button type="button" class="close fa fa-close" data-dismiss="modal" aria-label="Close"></button>
                    <h3 id="noticeTitle" class="box-title"><b>Notice</b></h4>
                </div>
                <div class="box-body">
                    <p id='noticeMessage' style="font-size: 24px;">message</p>
                </div>
                <div class="box-footer">
                    <button onclick="NoticeSure()" type="button" class="btn btn-primary">Yes</button>
                    <button type="button" class="btn btn-default  pull-right" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
      
    <div id="jobInfodlg" class="modal">
        <div class="modal-dialog">
            <form action="JobManagement/saveJobInfo" id="jobInfoForm" class="box box-primary box-solid form-horizontal" method="post" enctype="multipart/form-data" onsubmit="return saveJobInfo();">
                <div class="box-header">
                    <button type="button" class="close fa fa-close" data-dismiss="modal" aria-label="Close"></button>
                    <h3 class="box-title"><b>Job Info</b></h4>
                </div>
                <div class="box-body">
                    <div class="form-group">
                        <label for="jobname" class="col-sm-3 control-label">Job Name</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" placeholder="Job Name" id="jobname" name="jobname" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="sharedFile" class="col-sm-3 control-label">Job Content</label>
                        <div class="col-sm-8">
                            <input type="file" id="sharedFile" name="file">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="jobVersion" class="col-sm-3 control-label">Job Class</label>
                        <div class="col-sm-8">
                            <select class="form-control select2 select2-hidden-accessible" style="width: 100%;" tabindex="-1" aria-hidden="true" id="jobVersion" name="jobVersion">
                                <option selected="selected">SQL Job</option>
                                <option>JS Job</option>
                                <option>KM Job</option>
                                <option>Shell Job</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="jobdescription" class="col-sm-3 control-label">Job Description</label>
                        <div class="col-sm-8">
                            <textarea class="form-control" rows="3" placeholder="Job Description" id="jobdescription" name="jobdescription"></textarea>
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
      
</div>

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 2.2.3 -->
<script src="resources/adminlte/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="resources/adminlte/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="resources/adminlte/dist/js/app.min.js"></script>

<!-- Select2 -->
<script src="resources/adminlte/plugins/select2/select2.full.min.js"></script>
<!-- InputMask -->
<script src="resources/adminlte/plugins/input-mask/jquery.inputmask.js"></script>
<script src="resources/adminlte/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="resources/adminlte/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="resources/adminlte/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap datepicker -->
<script src="resources/adminlte/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- bootstrap color picker -->
<script src="resources/adminlte/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<!-- bootstrap time picker -->
<script src="resources/adminlte/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="resources/adminlte/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="resources/adminlte/plugins/iCheck/icheck.min.js"></script>
<!-- FastClick -->
<script src="resources/adminlte/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="resources/adminlte/dist/js/demo.js"></script>

<!-- DataTables -->
<script src="resources/adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="resources/adminlte/plugins/datatables/dataTables.bootstrap.min.js"></script>

<!-- local JS -->
<script src="resources/static/js/JobManagementPage.js"></script>
<script src="resources/static/js/jquery.form.js"></script>

</body>
</html>

